<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<link rel="stylesheet" href="front/css/bootstrap-datetimepicker.css"  type="text/css" >
		<!--下拉框 -->
		<link rel="stylesheet" href="front/css/chosen.css" type="text/css" />
		<link rel="stylesheet" href="front/css/normal.css">
		<link rel='stylesheet' href='front/css/dialog.css'>
		<link rel="stylesheet" href="front/css/addBox.css">
		<link rel="stylesheet" href="static/css/finance.css" />
	</head>
<body style='width:1100px'>
<p class="addSlide-title">费用报销单<span>×</span></p>
	<form action="expensereimbursement/${msg }.do" name="Form" id="Form" method="post" enctype="multipart/form-data" style="margin: 0 auto;">
	<div id="zhongxin">
	<input type="hidden" name="er_status" id="er_status"  />
	<input type="hidden" name="er_id" id="er_id"  value="${pd.er_id}"/>
	<p class="loanTitle">费用报销单</p>
    <table class="tableListBorder" >
        <colgroup>
            <col width="120">
            <col width="150">
            <col width="100">
            <col width="300">
            <col width="100">
            <col width="200">
            <col>
        </colgroup>
        <tbody >
            <tr>
                <td><span class="redStar">*</span>报销人姓名</td>
                <td><input type="text" value="${pd.USERNAME}" readonly="readonly" class="fieldEditable"></td>
                <td><span class="redStar">*</span>所属部门</td>
                <td>
                    <input type="text" value="${pd.department_name}" readonly="readonly" class="fieldEditable">
                </td>
                <td><span class="redStar">*</span>报销日期</td>
                <td>
                <c:if test="${pd.er_apply_time == null}"><input class="fieldEditable form_datetime date"   value="${pd.er_apply_time}" id="er_apply_time" name="er_apply_time" ></c:if>
                <c:if test="${pd.er_apply_time != null && pd.er_apply_time != ''}"><fmt:formatDate value="${pd.er_apply_time}" pattern="yyyy-MM-dd HH:mm:ss"/></c:if>
                </td>
            </tr>
          <%--  <tr>
                <td><span class="redStar">*</span>报销原因</td>
                <td colspan="3" style="width: 2000px;">
                    <textarea name="er_reason" class="loanTextarea">${pd.er_reason}</textarea>
                </td>
           </tr> --%>
        </tbody>
    </table>
    <table class="tableListBorder2" id="tableList2">
        <colgroup>
            <col width="120">
            <col>
            <col width="100">
            <col width="140">
            <col width="80">
            <col width="50">
        </colgroup>
        <tbody>
            <tr>
                <td>支出分类</td>
                <td>用途说明</td>
                <td>费用金额</td>
                <td>对方单位</td>
                <td>经手人</td>
                <td>
                    <input type="button" value="+" class="createAdd fieldEditable">
                </td>
            </tr>
            <c:choose>
					<c:when test="${not empty varList}">
						<c:forEach items="${varList}" var="var" varStatus="vs">
						 <input type="hidden"  name="er_detail_id" value="${var.er_detail_id}" >
				            <tr>
				                <td>
				                    <input type="text"  name="outlay_type" value="${var.outlay_type}" class="fieldEditable">
				                </td>
				                <td>
				                    <input type="text"   name="purpose_explanation" value="${var.purpose_explanation}" class="fieldEditable">
				                </td>
				                <td>
				                    <input type="number"  name="money" value="${var.money}" class="fieldEditable">
				                </td>
				                <td>
				                    <input type="text"  name="other_organisations" value="${var.other_organisations}" class="fieldEditable">
				                </td>
				                <td>
				                    <input type="text"  name="handled_by" value="${var.handled_by}"  class="fieldEditable">
				                </td>
				                <td>
				                    <input type="button" value="-"  class="fieldEditable delet">
				                </td>
				            </tr>
						</c:forEach>
					</c:when>
			</c:choose>
            <tr id="trclass">
                <td>
                    <input type="text"  name="outlay_type" value="" class="fieldEditable">
                </td>
                <td>
                    <input type="text" name="purpose_explanation" value=""  class="fieldEditable">
                </td>
                <td>
                    <input type="number"    name="money"  onblur="jisuan()" class="fieldEditable">
                </td>
                <td>
                    <input type="text"  name="other_organisations" value="" class="fieldEditable">
                </td>
                <td>
                    <input type="text"   name="handled_by" value=""  class="fieldEditable">
                </td>
                <td>
                    <input type="button" value="-"  class="fieldEditable delet">
                </td>
            </tr>
        </tbody>
    </table>
    <table class="tableListBorder2" >
        <colgroup>
            <col width="120">
            <col>
            <col width="140">
            <col width="130">
        </colgroup>
        <tbody>
            <tr>
                <td>合计(大写)</td>
                <td><input id="capital" class='fieldEditable' name="capital" value="${pd.capital}"  readonly="readonly" ></td>
                <td>
                   <input type="button" value="合计  ="  class="fieldEditable heji">
                </td>
                <td>
                    <input name="er_apply_amount" class="fieldEditable heji" id="sum" value="${pd.er_apply_amount}" readonly="readonly" >
                </td>
            </tr>
        </tbody>
    </table>
    <p style="width:100%;line-height: 30px;border-bottom: 1px solid #d9d9d9">* 填单人根据规定，提交给主管审批。在主管审批或上级审批通过后，请打印本电子单据并且粘贴上原始票据，传递给财务处理。</p>
    <c:if test="${pd.er_invoice  !=null && pd.er_invoice !=''}">
        <p>
                        点击下载：<a class="btn btn-mini btn-primary" href="192.168.198.251:8080/${pd.er_invoice}">${pd.name_invoice}</a>
        </p>
    </c:if>
    <c:if test="${pd.er_invoice  ==null || pd.er_invoice ==''}">
	<span>上传附件:</span>
		<a class="file operatea upload">点击上传文件<input type="file" name="er_invoice">
	          <span></span>
	    </a>
	</c:if>
    <p class="btn-box">
		<input class="confirmSave" type='button' onclick="save();" value='保存'>
		<input class="confirmSave" type='button' onclick="apply();" value='提交主管审批'>
		<input type="button" onclick="cancel();" value="取消保存" class="cancelSave">
	</p>
    </div>
</form>
	<script src="front/js/jquery-2.0.3.min.js"></script>
	<!-- 下拉框 -->
	<script src="front/js/chosen.jquery.js"></script>
	<!-- 日历插件 -->
	<script src="front/js/bootstrap-datetimepicker.js"></script>
	<!-- 弹框提示的 -->
	<script src='front/js/dialog.js'></script>
	<script src="front/js/jquery.tips.js"></script>
	<script src="front/js/index.js"></script>
	<script type="text/javascript">
	
	
		function jisuan(){
			 var arr = $("#tableList2 input[name='money']");
	            var all = 0;   //all就是总和
	            for(var i=0;i<arr.length;i++){
	            	var onePrice=arr[i].value;
	            	if(onePrice!="" && onePrice>=0){
	            		all+=parseFloat(arr[i].value);
	            	}else{
	            		 $.alert("请输入正确的金额");
	            	}
	            }
	            $("#sum").val(all);
	            var sum=digitUppercase(all);
	            $("#capital").val(sum); 
		}
	
		$(function() {
			
			 var date = new Date();
			    var seperator1 = "-";
			    var seperator2 = ":";
			    var month = date.getMonth() + 1;
			    var strDate = date.getDate();
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    if (strDate >= 0 && strDate <= 9) {
			        strDate = "0" + strDate;
			    }
			    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
			    $("#er_apply_time").val(currentdate);
			   
			    
			//日期插件
			$(".form_datetime").datetimepicker( {
			        autoclose:true,
			        format: "yyyy-mm-dd",
			        language: 'cn',
			        clearBtn:true,
			        todayHighlight: true,
					minView:2
		     });
			
			 //上传文件
		      $(document).on('change','input[type="file"]',function(){
		          var filePath = $(this).val();
		          $(this).next().html(insertTitle(filePath));
		      });
		
		  	$(".fieldSource").click(function(){
		        $(this).next('.depart').toggle();
		    });

		    $(document).on('click','.depart li',function(){
		        $(".bumen").html($(this).html());
		        $(this).parent().hide();
		    });
		    
		    var html = $("#trclass").html();
		    html = ('<tr>'+html+'</tr>');
		    $(".createAdd").click(function(){
		        $("#tableList2 tbody").append(html);
		    });

		    
		    
		    $(document).on('click','.delet',function(){
		        $(this).parent().parent().remove();
		    });
		    
		    $(document).on('click','.heji',function(){
	            var arr = $("#tableList2 input[name='money']");
	            var all = 0;   //all就是总和
	            for(var i=0;i<arr.length;i++){
	                all+=parseFloat(arr[i].value);
	            }
	            $("#sum").val(all);
	            var sum=digitUppercase(all);
	            $("#capital").val(sum); 
		    });
		    
		    
		 });	
		    var digitUppercase = function(n) {  
                var fraction = ['角', '分'];  
                var digit = [  
                    '零', '壹', '贰', '叁', '肆',  
                    '伍', '陆', '柒', '捌', '玖'  
                ];  
                var unit = [  
                    ['元', '万', '亿'],  
                    ['', '拾', '佰', '仟']  
                ];  
                var head = n < 0 ? '欠' : '';  
                n = Math.abs(n);  
                var s = '';  
                var sum = '';  
                for (var i = 0; i < fraction.length; i++) {  
                    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');  
                }  
                s = s || '整';  
                n = Math.floor(n);  
                for (var i = 0; i < unit[0].length && n > 0; i++) {  
                    var p = '';  
                    for (var j = 0; j < unit[1].length && n > 0; j++) {  
                        p = digit[n % 10] + unit[1][j] + p;  
                        n = Math.floor(n / 10);  
                    }  
                    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;  
                }  
                return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整'); 
            };
		    
		function cancel(){
			$('#zhongxin', parent.document).hide();
	    } 
		
		//保存
		function save(){
			if($("#er_apply_amount").val()==""){
				$("#er_apply_amount").tips({
					side:3,
		            msg:'请输入',
		            bg:'#AE81FF',
		            time:2
		        });
				$("#er_apply_amount").focus();
				return false;
			}
			var bool = false;
			var arr = $("#tableList2 input[name='other_organisations']");
            for(var i=0;i<arr.length;i++){
            	if (arr[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var money = $("#tableList2 input[name='money']");
            for(var i=0;i<money.length;i++){
            	if (money[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var outlay_type = $("#tableList2 input[name='outlay_type']");
            for(var i=0;i<outlay_type.length;i++){
            	if (outlay_type[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var purpose = $("#tableList2 input[name='purpose_explanation']");
            for(var i=0;i<purpose.length;i++){
            	if (purpose[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var handled_by = $("#tableList2 input[name='handled_by']");
            for(var i=0;i<handled_by.length;i++){
            	if (handled_by[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
		    $("#er_status").val('0');
		    if(bool){
		    	$("#Form").submit();
		    }else{
		    	$.alert("必须输入内容");
		    }
			
		}
		
		
		//提交流程
		function apply(){
			if($("#er_apply_amount").val()==""){
				$("#er_apply_amount").tips({
					side:3,
		            msg:'请输入',
		            bg:'#AE81FF',
		            time:2
		        });
				$("#er_apply_amount").focus();
				return false;
			}
			var bool = false;
			var arr = $("#tableList2 input[name='other_organisations']");
            for(var i=0;i<arr.length;i++){
            	if (arr[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var money = $("#tableList2 input[name='money']");
            for(var i=0;i<money.length;i++){
            	if (money[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var outlay_type = $("#tableList2 input[name='outlay_type']");
            for(var i=0;i<outlay_type.length;i++){
            	if (outlay_type[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var purpose = $("#tableList2 input[name='purpose_explanation']");
            for(var i=0;i<purpose.length;i++){
            	if (purpose[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
            var handled_by = $("#tableList2 input[name='handled_by']");
            for(var i=0;i<handled_by.length;i++){
            	if (handled_by[i].value=="") {
    				bool = false;
				}else{
					bool = true;
					break;
				}
            }
		    $("#er_status").val('1');
		    if(bool){
		    	$("#Form").submit();
		    }else{
		    	$.alert("必须输入内容");
		    }
		}
		</script>
</body>
</html>